<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>
  </head>
  <body>
    <p>测试：<input type="text" name="a" /></p>
    <p>文件：<input type="file" name="slice" multiple /></p>
    <button>提交</button> <br />
    <a resrole="thunder" href="/api/download/1723622049449-4r1o6k.pdf"
      >迅雷下载</a
    >
    <!-- <video width="300" controls src="/resources/mp4/40fe3406661ef16ae25a27d17c67727c.mp4"></video> -->
    <img src="" alt="" />
    <script>
      const a = document.querySelector("a[resrole=thunder]");
      const path = a.href;
      const thunderherf = `AA${path}ZZ`;
      // console.log('thunderherf',thunderherf)
      const thunderBase = window.btoa(thunderherf);
      const thunderLink = `thunder://${thunderBase}`;
      a.href = thunderLink;
      const input = document.querySelector("input[name=slice]");
      document.querySelector("button").onclick = function () {
        const formData = new FormData();
        formData.append("a", document.querySelector("input[name=a]").value);
        const file = input.files[0];
        console.log("file", file);
        const slices = [];
        const size = 10 * 1024 * 1024;
        for (let i = 0; i < file.size; i += size) {
          slices.push(file.slice(i, i + size));
        }
        console.log("slices", slices);
        const md5Name = CryptoJS.MD5(file.name.split(".")[0]).toString();
        const promises = slices.map((slice, index) => {
          console.log("slice", slice);
          const formData = new FormData();
          formData.append("slice", slice, `${md5Name}-${index + 1}`);
          return fetch("/api/upload/slice", {
            method: "POST",
            body: formData,
          });
        });
        Promise.all(promises).then((res) => {
          console.log("res", res);
          fetch("/api/upload/merge", {
            method: "POST",
            headers: {
              "Content-Type": "application/json",
            },
            body: JSON.stringify({
              filename: md5Name,
              type: file.type,
            }),
          })
            .then((res) => res.json())
            .then((res) => {
              console.log(res);
            });
        });
        // console.dir(input);
        // const { files } = input;
        // Object.keys(files).forEach((key) => {
        //   formData.append("file", files[key]);
        // });
        // console.log(formData);
        // formData.append(
        //   "file",
        //   document.querySelector("input[name=img]").files[0]
        // );
        // fetch("/api/upload", {
        //   method: "POST",
        //   body: formData,
        // })
        //   .then((res) => res.json())
        //   .then((res) => {
        //     console.log(res);
        //   });
        // fetch("/api/upload/multiple", {
        //     method: "POST",
        //     body: formData,
        //   })
        //   .then((res) => res.json())
        //   .then((res) => {
        //     console.log(res);
        //   });
        // 分片上传
      };

      function chineseContentHash(content) {
        let hash = 0;
        for (let i = 0; i < content.length; i++) {
          const char = content.charCodeAt(i);
          hash = (hash << 5) - hash + char; // 哈希函数
          hash |= 0; // 将hash转换为32位整数
        }
        return hash;
      }
    </script>
  </body>
</html>
